<template>
  <div class="listperson">
    <table border="1" cellpadding="0" cellspacing="0" style="width:80%;margin:35px auto;">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>职务</th>
        <th>薪资</th>
        <th>入职时间</th>
        <th>操作</th>
      </tr>
      <tr align="center" v-for="(item,index) in SelectVuex" :key="index">
        <td>{{index+1}}</td>
        <td>{{item.uname}}</td>
        <td>{{item.newGender}}</td>
        <td>{{item.age}}</td>
        <td>{{item.newPort}}</td>
        <td>{{item.salary}}</td>
        <td>{{item.ctime}}</td>
        <td>
          <button @click="goEdit(index)">编辑</button>
          <button @click="del(index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name:'ListPersonCom',
    // 事件函数，需要触发的
    methods:{

      ...mapMutations(['dellist']),
      // 删除函数
      del(index){
        this.dellist(index);
      },


      // 跳转编辑页
      goEdit(index){
        console.log(index);
        

        this.$router.push('/home/editperson?i='+index)
      }
    },
    // 计算属性内部的函数是自动执行且可以作为数据循环
    computed:{
      // 获取vuex的state内部数据
      ...mapState(['plist']),
      // 如果不用快捷方法:this.$store.state.plist

      // 对数据进行加工
      SelectVuex(){
        // 备份
        let plist = this.plist;
        for(let item of plist){
          item.newGender=item.gender==0?'女':'男';
          // 一个变量多种可能
          switch(item.port){
            case 1: item.newPort = '老板';break;
            case 2: item.newPort = '总经理';break;
            case 3: item.newPort = '部门主管';break;
            case 4: item.newPort = '组长';break;
            case 5: item.newPort = '员工';break;
          }
        }
        return plist;
      }
    }
}
</script>

<style scoped>
.listperson h1{
  text-align: center;
}
table{
  margin: 0 auto;
}
</style>